import React from "react"
import './index.css'



const Hook = props => {
    return (
        <div>
            <h2 style={{ textAlign: 'center', color: 'red' }}>hook在函数组件的最顶层调用，防止匹配顺序错乱</h2>
            <ol >

                <div >
                    <li className="title">state(useState)</li>
                    <div className="content" >
                        <p>定义状态名称：const [state,setState] = useState（state初始值）</p>
                        <p>通过setState()方法该改变state初始值</p>

                    </div>
                </div>


                <div >
                    <li className="title">useEffect</li>
                    <div className="content" >
                        <p>useEffect(effect,[])</p>
                        <p>
                            useEffect（）接收两个参数，第一个是要运行的函数，第二个是一个数组，
                            第二个参数数组可忽略，那样effect会在每次更新后执行，
                            相当于clsss组件中的componentDidMount和componentDidUpdat周期
                        </p>
                        <p>effect中return function fun() ,相当于componentWillUnmount中执行fun()</p>
                        <p>第二个数组参数,[state]表示只有在state发生了变化才会执行effect方法，数组中任一变量发型变化都会执行effect,想要effect执行一次，数组[]可为空</p>

                    </div>
                </div>


            </ol>
        </div >
    )
}
export default Hook
